<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>下一顿吃什么？</h3>
    <ul id="box"></ul>
</body>
<script>
    function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
    }

    var vagitables = ["番茄鸡蛋","青椒土豆丝","凉拌黄瓜","蒜蓉青菜","干锅花菜","芦蒿臭干","韭菜鸡蛋","蒜泥空心菜"];
    var meats = ["青椒肉丝","红烧老母鸡","红烧肉","小炒黄牛肉","红烧鲫鱼","蒲烧鳗鱼","羊蝎子","小龙虾","红烧河虾","牛排","鱼头汤","干锅牛蛙"];
    var soups = ["番茄蛋汤","紫菜蛋汤","西湖牛肉羹","青菜豆腐汤"];

    var vLen = vagitables.length;
    var mLen = meats.length;
    var sLen = soups.length;

    var vagitable = vagitables[parseInt(getRandomInt(0, vLen))];
    var meat = meats[parseInt(getRandomInt(0, mLen))];
    var soup = soups[parseInt(getRandomInt(0, sLen))];

    var vagitableLi = document.createElement('li');
    vagitableLi.innerText = vagitable;

    var meatLi = document.createElement('li');
    meatLi.innerText = meat;

    var soupLi = document.createElement('li');
    soupLi.innerText = soup;


    var box = document.getElementById("box");
    box.appendChild(vagitableLi);
    box.appendChild(meatLi);
    box.appendChild(soupLi);

</script>
</html>